<template>
  <Card style="height: 100%">
    <Button type="primary" style="margin-bottom: 20px" @click="addDB">新增数据库</Button>
    <Table :columns="columns" :data="data">
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="handleEdit(row.id)">编辑</Button>
        <Button type="error" size="small" @click="remove(row.id)">删除</Button>
      </template>
    </Table>

    <dbForm :visible="visible" :title="title" :id="Db_id" :edit="edit" @close="close"/>
  </Card>
</template>

<script>
import dbForm from "@/view/product/db_form";
import {DataBaseDel, DataBaseList, projectDel, projectList} from "@/utils/api";
import {formatDate} from "@/utils/common";

const columns = [
  {
    title: '名称',
    key: 'name'
  },
  {
    title: '数据库类型',
    key: 'database_type'
  },
  {
    title: '数据库地址',
    key: 'address'
  },
  {
    title: '所属环境',
    key: 'env_name'
  },
  {
    title: '备注',
    key: 'remark'
  },
  {
    title: '创建人员',
    key: 'username'
  },
  {
    title: '创建时间',
    key: 'created_time',
    render: (h, params) => {
      return h('div',
          formatDate(new Date(params.row.created_time), 'yyyy-MM-dd hh:mm:ss')
      )
    }
  },
  {
    title: '操作',
    slot: 'action',
    width: 150,
    align: 'center'
  }
]
export default {
  name: "db_list",
  data() {
    return {
      columns,
      data: [],
      visible: false,
      title: "",
      Db_id: 0,
      edit: false,
      total: 0,
      page: {
        page: 1,
        page_size: 10,
      }
    }
  },
  components: {
    dbForm
  },
  created() {
    this.query()
  },
  methods: {
    addDB() {
      this.title = "新增数据库";
      this.visible = true;
    },
    handleEdit(id) {
      this.Db_id = id;
      this.edit = true;
      this.title = "修改数据库";
      this.visible = true;
    },
    close(e) {
      this.Db_id = 0;
      this.edit = false;
      this.visible = e;
      this.query();
    },
    remove(id) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除？",
        okText: "确认",
        cancelText: "取消",
        onOk: async () => {
          DataBaseDel(id).then(res => {
            if (res.data.errno !== 0) {
              this.$Message.error(res.data.errmsg)
              return
            }
            this.$Message.success("删除成功")
            this.query()
          })
        }
      })
    },
    handleChange(e) {
      this.page.page = e;
      this.query();
    },
    handleSize(e) {
      this.page.page_size = e
      this.query()
    },
    query() {
      const obj = {
        ...this.page,
        project_id: localStorage.getItem("project_id")
      }
      DataBaseList(obj).then(res => {
        if (res.data.errno !== 0) {
          this.$Message.error(res.data.errmsg)
          return
        }
        this.data = res.data.data.rows
        this.total = res.data.data.count
      })
    },
  }
}
</script>

<style scoped>

</style>
